<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>找回密码</title>
    <link href="css/register.css" rel="stylesheet">
    <style>
        /* 添加一些样式来美化页面 */
        body {
            font-family: Arial, sans-serif;
            background-color: #f2f2f2;
            margin: 0;
            padding: 0;
        }

        .form-div {
            width: 300px;
            margin: 100px auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        input[type="text"], button {
            padding: 10px;
            margin: 5px 0;
            width: 100%;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 3px;
        }

        button {
            background-color: #007bff;
            color: #fff;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #0056b3;
        }

        #message {
            font-size: 14px;
            margin-top: 10px;
        }

        #message.success {
            color: green;
        }

        #message.error {
            color: red;
        }
    </style>
</head>

<body>
<div class="form-div">
    <form id="form0" name="form0" autocomplete="off">



        <div>
            <label for="newPassWord">新密码：</label>
            <input type="password" name="newPassWord" id="newPassWord" placeholder="请输入新密码" value=" ">
        </div>
        <label for="email">请输入您注册时填入的邮箱</label>
        <div>
            <input type="text" name="email" id="email" placeholder="输入邮箱" value=" ">
            <button id="btnGetVcode">获取验证码</button>
        </div>
        <div>
            <label for="vcode">验证码：</label>
            <input type="text" name="vcode" id="vcode" placeholder="输入验证码">
            <span id="message"></span>
        </div>
        <button type="button" id="btnVerify">验证</button>
    </form>
</div>

<!-- 引入jQuery -->
<script src="js/jquery-1.11.3.js"></script>
<script src="js/jsEmail.js"></script>
<script>
    var time0 = 60;
    var time = time0;
    var t;  // 用于验证按钮的60s计时

    $(document).ready(function() {
        // 获取验证码按钮
        $("#btnGetVcode").click(function() {
            var btnGet = $("#btnGetVcode");
            btnGet.prop("disabled", true);  // 为了防止多次点击
            $.ajax({
                url: 'EmailServlet?method=getVCode',
                type: 'post',
                data: {email: $("input[name='email']").val()},
                dataType: 'text',
                success: function(msg) {
                    if (msg == -1) {
                        window.alert("请输入正确的邮箱！");
                        btnGet.prop("disabled", false);
                    } else {
                        useChangeBTN();  // 控制下一次重新获取验证码
                    }
                },
                error: function(msg) {
                }
            });
        });

        // 验证按钮
        $("#btnVerify").click(function() {
            var message = $("#message");  // 显示提示信息
            $.ajax({
                url: 'EmailServlet?method=verify',
                type: 'post',
                data: {vcode: $("input[name='vcode']").val(),
                       newPassWord:$("input[name='newPassWord']").val(),
                        email:$("input[name='email']").val()

                },
                dataType: 'text',
                success: function(msg) {
                    if (msg == 1) {
                        message.text("验证码正确！").removeClass().addClass("success");
                        window.location.href = 'login.html';
                    } else {
                        message.text("验证码错误！").removeClass().addClass("error");
                    }
                },
                error: function(msg) {
                }
            });
        });
    });

    // 修改按钮，控制验证码重新获取
    function changeBTN() {
        if (time > 0) {
            $("#btnGetVcode").text("(" + time + "s)重新获取");
            time--;
        } else {
            var btnGet = $("#btnGetVcode");
            btnGet.prop("disabled", false);
            btnGet.text("获取验证码");
            clearInterval(t);
            time = time0;
        }
    }

    function useChangeBTN() {
        $("#btnGetVcode").text("(" + time + "s)重新获取");
        time--;
        t = setInterval(changeBTN, 1000);  // 1s调用一次
    }

</script>
</body>
</html>
